
<template>
    <div class="herb-land-related-lite-comp" ref="herbrelateliter">
         <TitleBox type=2>
            <template #titlecont>
                <span v-lang="{lang: controlSto.language, lgid: -31}">Related literatures</span>
            </template>
        </TitleBox>
        <!-- TODO 嵌套table -->
        <div class="cont-box">
            <uiTable :key="dataObj.searchTablevt" 
                :config="dataObj.tableConfig" 
                :columnConfig="dataObj.columnConfig" 
                :loading="isLoading"
                :data="dataObj.dataList">
                <template #[condObj.idField]="{ row }">
                    <div class="jump-box" @click.stop="toClkItem(row, 1)"><span>{{row[condObj.idField]}}</span></div>
                </template>
            </uiTable>
            <div class="page-box" v-if="condObj.total > 10">
                <uiPagination
                    :total="condObj.total" :pageSize="condObj.pageSize" :pageIndex="condObj.pageIndex"
                    @onSizeChange="chgSize" @onCurrentChange="chgCurrnt"/>
            </div>
            
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs, computed, onBeforeMount, watch } from 'vue';
    import { useIntersectionObserver } from '@vueuse/core';
    import TitleBox from '@/components/TitleBox.vue'
    import uiTable from '@/components/ui-table.vue'

    import { langTxt, getFilterThArr, getFilterLangArr } from '@/utils/util'
    import { getTableThList, getLiteratures } from '@/service/tcm'

    import { controlStore } from '@/stores/control'
    import { debounce } from 'lodash'
    
    const emitter = defineEmits(['toCalc']);
    const herbrelateliter = ref(null);
    const props = defineProps({
        detailId: {
            type: [Number, String],
            default: ''
        }
    });
    const { detailId } = toRefs(props);
    
    let searchDebounce = null;

    const controlSto = controlStore();
    const isLoading = ref(true);

    const condObj = reactive({
		// searchword: '',
		filterKey: 'herb8',
        uiCode: 'related_literatures',
        total: 0,
        pageSize: 10,
        pageIndex: 1,
        idField: '100716826576557050'
	});

	const dataObj = reactive({
		searchTablevt: 1,
		dataList: [],
        tableConfig: {
            // size: 'mini',
            'tooltip-effect': 'dark',
            'highlight-current-row': true,
            stripe: true,
			'header-cell-style': { background: '#BC9F77', color: '#FFF' },
        },
        columnConfig: [],
        subTableConfig: {
            // size: 'mini',
            'tooltip-effect': 'dark',
            'highlight-current-row': true,
            stripe: true,
			'header-cell-style': { background: '#F2ECE4', color: '#333' },
        },
        subColumnConfig: [],
	});

    const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});

    onBeforeMount(()=> {
        
        const {stop} = useIntersectionObserver(
            herbrelateliter,
            ([{ isIntersecting }], observerElement) => {
                    if (isIntersecting) {
                        // 停止监听，如果你只想知道一次可视性变化
                        initDebounce();
                        getTableTh();
                        toGetData();
                        //阻止再次请求
                        stop()
                    }
            },
            {
                    threshold: 0, // 当交叉框达到视窗的这部分时触发
            }
        );
    });

    const initDebounce = () => {
        searchDebounce = debounce((e) => {
           getDataList();
        }, 400);
    };
    const toClkItem = (row) => {
        window.open('https://xueshu.baidu.com/usercenter/paper/show?paperid=3e0c8ad39263d562a00fe23e17ea7982', '_blank');
    }
    const getTableTh = () => {
        let params = {
            uiCode: condObj.uiCode,
            langCode: 'ENG,CHN'
        };
        getTableThList(params).then((res) => {
            if (res.success) {
                let arr = res.data || [];
                let thArr = getFilterThArr(arr, dataObj.filterKey);
        		let langArr = getFilterLangArr(thArr);
        		controlSto.setLangList(langArr);
        		dataObj.columnConfig = thArr;
		        dataObj.searchTablevt = new Date().valueOf();
            }
        }).catch(() => {});

        // let thArr = getFilterThArr(arr, condObj.filterKey);
        // let langArr = getFilterLangArr(thArr);
        // controlSto.setLangList(langArr);
        // thArr.unshift({ label: '', dataCode: 'expand', width: 80, type: 'expand'});
        // dataObj.columnConfig = thArr;
		// dataObj.searchTablevt = new Date().valueOf();
    };
    const chgSize = (e) => {
        condObj.pageSize = e || 10;
        toGetData();
    };
    const chgCurrnt = (e) => {
        condObj.pageIndex = e || 1;
        toGetData();
    };
    

    
    const toGetData = () => {
        searchDebounce && searchDebounce();
    };

    const getDataList = () => { // getHerbRelatedLite
        let params = {
            langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
            treatiseType: controlSto.language == 1 ? 'herb-drug' : '草药',
            // herbId: detailId.value,
            // content: condObj.searchword,
            uiTypeCode: condObj.uiCode,
			pageNo: condObj.pageIndex || 10,
			pageSize: condObj.pageSize || 1
        };
        isLoading.value = true;
        getLiteratures(params).then((res) => {
            isLoading.value = false;
            if (res.success && res.data && res.data.records) {
                dataObj.dataList = res.data.records || [];
                condObj.total = res.data.totalCount || 0;
            }
            console.log(dataObj.dataList, '>>>>>>>>>>>')
        }).catch(() => {
            isLoading.value = false;
        });
        emitter('toCalc');
    };



    
    watch(() => controlSto.language, (n, v) => {
        if(n != v) {
            toGetData();
        }
    }, { immediate: true });


</script>


<style lang="scss" scoped>
    .herb-land-related-lite-comp {
        margin-bottom: 32px;
        .cont-box {
            padding-top: 24px;
            .sub-table-box {
                padding-left: 78px;
            }
        }
    }
</style>
